<!-- 自选套餐 -->
<template>
	<d2-container>
		<div slot="header" style="display: flex;justify-content:space-between;">
			<div>自选套餐</div>
			<div>
				<!-- <el-button type="primary" size="small " @click="onOptionDialog('添加')">添加</el-button> -->
			</div>
		</div>
		<!-- 内容 -->
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="index" label="序号"></el-table-column>
				<el-table-column label="图片">
					<template slot-scope="scope">
						<el-avatar :src="baseUrl+scope.row.imgurl" v-if="scope.row.imgurl!=''&&scope.row.imgurl!=null"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="su" label="素菜">
				</el-table-column>
				<el-table-column prop="hun" label="荤菜">
				</el-table-column>
				<el-table-column prop="price" label="金额">
				</el-table-column>
				<el-table-column label="开启状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.state==1">开启</el-tag>
						<el-tag type="danger" v-else>关闭</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="onState(scope.row.id,1)" v-if="scope.row.state==2">开启</el-button>
						<el-button type="text" @click="onState(scope.row.id,2)" v-if="scope.row.state==1">关闭</el-button>
						<el-button type="text" @click="onOptionDialog('修改',scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 弹窗 -->
			<el-dialog title="自选套餐" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
				<el-form label-width="100px" ref="dialogFrom" :model="form">
					<el-form-item label="素菜" prop="su" :rules="[{required: true, message: '素菜不能为空', trigger: 'change'}]">
						<el-input v-model.number="form.su" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="荤菜" prop="hun" :rules="[{required: true, message: '荤菜不能为空', trigger: 'change'}]">
						<el-input v-model.number="form.hun" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="金额" prop="price" :rules="[{required: true, message: '金额不能为空', trigger: 'change'}]">
						<el-input v-model.number="form.price"></el-input>
					</el-form-item>
					<el-form-item label="开启状态" prop="state" :rules="[{required: true, message: '金额不能为空', trigger: 'blur'}]">
						 <el-radio-group v-model.number="form.state" size="small">
						      <el-radio :label="1" border>开启</el-radio>
						      <el-radio :label="2" border>关闭</el-radio>
						    </el-radio-group>
					</el-form-item>
					<el-form-item label="上传主图">
						<el-upload action="/managea/Tphoto" list-type="picture-card" :on-remove="handleRemove" :on-error="handlError"
						 :on-exceed="handlExceed" :on-success="hanlSuccess" :limit="1" :file-list="fileList">
							<i class="el-icon-plus"></i>
						</el-upload>
						<div style="color: red;">建议上传图片尺寸为106*106像素</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">确定</el-button>
						<el-button @click="handleClose">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
	</d2-container>
</template>

<script>
	import {
		getDapei,
		postDapeiAdd,
		getDapeiEdit,
		postDapeiUpdate,
		getDapeiState
	} from '@/api/api'
	export default {
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				fileList: [], //图片路径
				baseUrl: process.env.VUE_APP_URL,
				form: {
					imgurl: '',
					hun: '',
					su: '',
					price: '',
					state:2
				},
				id: -1
			}
		},
		mounted() {
			this.getOptionData()
		},
		methods: {
			// 列表 加载
			getOptionData() {
				getDapei().then(res => {
					if (res.state == 0) {
						this.tableData = res.data.data
					}
				})
			},
			onOptionDialog(state) {
				if (state == '添加') {
					this.id = -1;
					this.dialogVisible = true
				} else {
					getDapeiEdit(arguments[1]).then(res => {
						if (res.state == 0) {
							this.id = arguments[1]
							this.form = res.data
							if(res.data.imgurl!=null&&res.data.imgurl!=undefined){
								let data={
									url:this.baseUrl+res.data.imgurl
								}
								this.fileList.push(data)
							}
							this.dialogVisible = true
						}
					})
				}
			},
			//弹窗关闭
			handleClose() {
				this.dialogVisible = false
				this.$refs.dialogFrom.resetFields()
				this.fileList=[]
			},
			//开启 状态
			onState(id, state) {
				this.$confirm('此操作将更改开启状态, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					getDapeiState(id).then(res=>{
						if(res.state==0){
							this.$message({
								type: 'success',
								message: '更改成功!'
							});
							this.getOptionData()
						}
					})
					
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确定提交
			onSubmit() {
				this.$refs.dialogFrom.validate((valid) => {
					if (valid) {
						let data = {
							imgurl: this.form.imgurl,
							hun: this.form.hun,
							su: this.form.su,
							price: this.form.price,
							state:this.form.state
						}
						if (this.id != -1) { //修改
							data.id = this.id
							postDapeiUpdate(data).then(res => {
								if (res.state == 0) {
									this.$message.success('修改成功')
									this.getOptionData()
									this.handleClose()
								}
							})
						} else {
							postDapeiAdd(this.form).then(res => {
								if (res.state == 0) {
									this.$message.success('添加成功')
									this.getOptionData()
									this.handleClose()
								}
							})
						}
					} else {
						return false
					}
				})

			},
			//图片上传
			handleRemove(file, fileList) {
				//删除
				this.fileList = fileList;
				this.form.imgurl = '';
				console.log(this.fileList);
			},
			handlError(err, file, fileList) {
				this.$message.error('图片上传失败！');
			},
			handlExceed(files, fileList) {
				if (fileList.length >= 1) {
					this.$message.error('只能上传一张图片');
				}
			},
			hanlSuccess(res, file, FileList) {
				//成功
				this.form.imgurl = res.data[1]; //存路径上传的时候用
				// this.fileList[0]=res.data[1]
			},
		}
	}
</script>

<style>
</style>
